<template>
  <div class="all">
    <div class="main">
      <div class="main-shang">
        <div class="zmd-1">
          <el-carousel
            :interval="4000"
            type="card"
            height="590px"
            arrow="never"
          >
            <!-- 气象主题 -->
            <el-carousel-item style="width: 320px; height: 573px">
              <div class="qixiang" @click="QyiClick">
                <div class="lunbo">
                  <ul v-for="(item, index) in lists" :key="index">
                    <li class="l1">{{ item.l1 }}</li>
                    <li class="l2">{{ item.l2 }}</li>
                    <li class="l3">
                      {{ item.l3 }} <a href="#">{{ item.l4 }}</a>
                    </li>
                  </ul>
                </div>
                <div class="tongji">
                  <span>●&nbsp;2020各区灾情统计（单位：件/月）</span>
                  <PublicfourHistogram
                    seriesType="bar"
                    seriesType1="bar"
                    seriesType2="bar"
                    seriesType3="bar"
                    chartId="QiXiangEcharts"
                    title
                    seriesName="蓝色"
                    seriesName1="黄色"
                    seriesName2="橙色"
                    seriesName3="红色"
                    :xData="xData"
                    :seriesData="seriesData"
                    :seriesData1="seriesData1"
                    :seriesData2="seriesData2"
                    :seriesData3="seriesData3"
                  />
                </div>
                <div class="tubiao">
                  <span>●&nbsp;全区气象灾害灾情种类统计</span>
                  <div class="quantu">
                    <div
                      class="tubiao1"
                      v-for="(item, index) in lises"
                      :key="index"
                      :style="{ backgroundImage: 'url(' + item.imgages + ')' }"
                    >
                      <p>{{ item.shu }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </el-carousel-item>
            <!-- 地质主题 -->
            <el-carousel-item style="width: 320px; height: 573px">
              <div class="dizhi" @click="DziClick">
                <div class="lunbo">
                  <ul v-for="(item, index) in lista" :key="index">
                    <li class="l1">{{ item.l1 }}</li>
                    <li class="l2">
                      {{ item.l2 }}<a href="#">{{ item.l5 }}</a>
                    </li>
                    <li class="l4">
                      {{ item.l3 }} <a href="#">{{ item.l4 }}</a>
                    </li>
                  </ul>
                </div>
                <div class="tongji">
                  <span>●&nbsp;2020各区灾情统计（单位：件/月）</span>
                  <PublicthreeHistogram
                    seriesType="bar"
                    seriesType1="bar"
                    seriesType2="bar"
                    chartId="ZqtjthreeEcharts"
                    title
                    seriesName="山体滑坡"
                    seriesName1="泥石流"
                    seriesName2="崩塌"
                    :xData="xthreeData"
                    :seriesData="seriesthreeData"
                    :seriesData1="seriesthreeData1"
                    :seriesData2="seriesthreeData2"
                  />
                </div>
                <div class="zhexian">
                  <span>●&nbsp;全区灾情统计（单位：件/月）</span>
                  <PublictheelineChart
                    seriesType="line"
                    seriesType1="line"
                    seriesType2="line"
                    chartId="linethreeEcharts"
                    title
                    seriesName="山体滑坡"
                    seriesName1="泥石流"
                    seriesName2="崩塌"
                    :xData="xthreelineData"
                    :seriesData="serieslinethreeData"
                    :seriesData1="serieslinethreeData1"
                    :seriesData2="serieslinethreeData2"
                  />
                </div>
              </div>
            </el-carousel-item>
            <!-- 地震主题 -->
            <el-carousel-item style="width: 320px; height: 573px">
              <div class="dizheng" @click="DzziClick">
                <div class="lunbo">
                  <ul v-for="(item, index) in listb" :key="index">
                    <li class="l1">{{ item.l1 }}</li>
                    <li class="l2">
                      {{ item.l2 }}<a href="#">{{ item.l5 }}</a>
                    </li>
                    <li class="l3">
                      {{ item.l3 }} <a href="#">{{ item.l4 }}</a>
                    </li>
                  </ul>
                </div>
                <div class="tongji">
                  <span>●&nbsp;2020各区灾情统计（单位：件/月）</span>
                  <PublicfourHistogram
                    seriesType="bar"
                    seriesType1="bar"
                    seriesType2="bar"
                    seriesType3="bar"
                    chartId="ZqtjEcharts"
                    title
                    seriesName="有感地震"
                    seriesName1="中强震"
                    seriesName2="强震"
                    seriesName3="大地震"
                    :xData="xData"
                    :seriesData="seriesData"
                    :seriesData1="seriesData1"
                    :seriesData2="seriesData2"
                    :seriesData3="seriesData3"
                  />
                </div>
                <div class="zhexian">
                  <span>●&nbsp;全区灾情统计（单位：件/月）</span>
                  <PublicfourlineChart
                    seriesType="line"
                    seriesType1="line"
                    seriesType2="line"
                    seriesType3="line"
                    chartId="linefourEcharts"
                    title
                    seriesName="有感地震"
                    seriesName1="中强震"
                    seriesName2="强震"
                    seriesName3="大地震"
                    :xData="xfourlineData"
                    :seriesData="serieslinefourData"
                    :seriesData1="serieslinefourData1"
                    :seriesData2="serieslinefourData2"
                    :seriesData3="serieslinefourData3"
                  />
                </div>
                >
              </div>
              >
            </el-carousel-item>
            <!-- 全灾害主题 -->
            <el-carousel-item style="width: 320px; height: 573px">
              <div class="quanzai" @click="QzhiClick">
                <div class="lunbo">
                  <ul v-for="(item, index) in listc" :key="index">
                    <li class="l1">{{ item.l1 }}</li>
                    <li class="l2">
                      {{ item.l2 }}<a href="#">{{ item.l5 }}</a>
                    </li>
                    <li class="l4">
                      {{ item.l3 }} <a href="#">{{ item.l4 }}</a>
                    </li>
                  </ul>
                </div>
                <div class="tongji">
                  <span>●&nbsp;一季度历年灾害情况</span>
                  <PublicthreeHistogram
                    seriesType="bar"
                    seriesType1="bar"
                    seriesType2="bar"
                    chartId="QuanZaiEcharts"
                    title
                    seriesName="2018"
                    seriesName1="2019"
                    seriesName2="2020"
                    :xData="xquanData"
                    :seriesData="seriesthData"
                    :seriesData1="seriesthData1"
                    :seriesData2="seriesthData2"
                  />
                </div>
                <div class="zaiimg">
                  <span>●&nbsp;灾害隐患点</span>
                  <div class="quantue">
                    <div
                      class="zaihan"
                      v-for="(item, index) in lisa"
                      :key="index"
                      :style="{ backgroundImage: 'url(' + item.img + ')' }"
                    >
                      <h4>{{ item.po }}</h4>
                      <p>{{ item.pp }}</p>
                    </div>
                  </div>
                </div>
              </div>
              >
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="center">
          <div class="bo">
            <span @click="back" id="back" v-show="this.flag">返回</span>
            <div id="china_map" class="bo1"></div>
          </div>
        </div>
        <div class="zmd-2">
          <el-carousel
            :interval="4000"
            type="card"
            height="590px"
            arrow="never"
          >
            <!-- 干旱主题 -->
            <el-carousel-item style="width: 320px; height: 573px">
              <div class="ganhan" @click="GhiClick">
                <div class="lunbo">
                  <ul v-for="(item, index) in lints" :key="index">
                    <li class="l1">{{ item.a1 }}</li>
                    <li class="l2">
                      {{ item.a2 }}<a href="#">{{ item.a5 }}</a>
                    </li>
                    <li class="l4">
                      {{ item.a3 }} <a href="#">{{ item.a4 }}</a>
                    </li>
                  </ul>
                </div>
                <div class="yuan">
                  <span>●&nbsp;全区干旱灾情种类统计</span>
                  <div class="kuang">
                    <div class="xiang">
                      <PubliccircularProgressbar
                        chartId="piethreeEcharts"
                        :title="pietitle"
                        subtitle="气象干旱"
                        titleColor="#2FB4FF"
                        seriesColor1="#6648FF"
                        seriesColor2="#00AEF3"
                        :seriesData="seriespieData"
                        :Radius="Radius"
                      />
                    </div>
                    <div class="nongye">
                      <PubliccircularProgressbar
                        chartId="NongEcharts"
                        :title="nongtitle"
                        subtitle="农业干旱"
                        titleColor="#65FF74"
                        seriesColor1="#6648FF"
                        seriesColor2="#00AEF3"
                        :seriesData="nongyeData"
                        :Radius="NongRadius"
                      />
                    </div>
                    <div class="shuiwen">
                      <PubliccircularProgressbar
                        chartId="ShuiWenEcharts"
                        :title="shuititle"
                        subtitle="水文干旱"
                        titleColor="#FF2020"
                        seriesColor1="#FF2214"
                        seriesColor2="#FF2214"
                        :seriesData="shuiData"
                        :Radius="Radius"
                      />
                    </div>
                  </div>
                </div>
                <div class="tongxia">
                  <span>●&nbsp;一季度历年灾害情况</span>
                  <PublicthreeHistogram
                    seriesType="bar"
                    seriesType1="bar"
                    seriesType2="bar"
                    chartId="GanHanEcharts"
                    title
                    seriesName="中旱"
                    seriesName1="重旱"
                    seriesName2="特旱"
                    :xData="xthreeData"
                    :seriesData="seriesthData"
                    :seriesData1="seriesthData1"
                    :seriesData2="seriesthData2"
                  />
                </div>
              </div>
            </el-carousel-item>
            <!-- 洪涝主题 -->
            <el-carousel-item style="width: 320px; height: 573px">
              <div class="honglao" @click="HLiClick">
                <div class="lunbo">
                  <ul v-for="(item, index) in lints" :key="index">
                    <li class="l1">{{ item.a1 }}</li>
                    <li class="l2">
                      {{ item.a2 }}<a href="#">{{ item.a5 }}</a>
                    </li>
                    <li class="l4">
                      {{ item.a3 }} <a href="#">{{ item.a4 }}</a>
                    </li>
                  </ul>
                </div>
                <div class="yuan">
                  <span>●&nbsp;全区水位预警</span>
                  <div class="kuang">
                    <div class="xiang">
                      <PubliccircularProgressbar
                        chartId="chaoEcharts"
                        :title="chaotitle"
                        subtitle="超汛线"
                        titleColor="#2FB4FF"
                        seriesColor1="#6648FF"
                        seriesColor2="#00AEF3"
                        :seriesData="chaoData"
                        :Radius="Radius"
                      />
                    </div>
                    <div class="nongye">
                      <PubliccircularProgressbar
                        chartId="ChaojingEcharts"
                        :title="jingtitle"
                        subtitle="超警戒线"
                        titleColor="#65FF74"
                        seriesColor1="#77FF47"
                        seriesColor2="#00AEF3"
                        :seriesData="jingData"
                        :Radius="NongRadius"
                      />
                    </div>
                    <div class="shuiwen">
                      <PubliccircularProgressbar
                        chartId="JishuiEcharts"
                        :title="jititle"
                        subtitle="积水"
                        titleColor="#FF2020"
                        seriesColor1="#FF2214"
                        seriesColor2="#FF2214"
                        :seriesData="jiData"
                        :Radius="Radius"
                      />
                    </div>
                  </div>
                </div>
                <div class="tongxia">
                  <span>●&nbsp;年度各区洪涝灾情（单位：件/月）</span>
                  <PublicfourHistogram
                    seriesType="bar"
                    seriesType1="bar"
                    seriesType2="bar"
                    seriesType3="bar"
                    chartId="LaoEcharts"
                    title
                    seriesName="小洪水"
                    seriesName1="中洪水"
                    seriesName2="大洪水"
                    seriesName3="特大洪水"
                    :xData="xData"
                    :seriesData="seriesData"
                    :seriesData1="seriesData1"
                    :seriesData2="seriesData2"
                    :seriesData3="seriesData3"
                  />
                </div>
              </div>
            </el-carousel-item>
            <!-- 森林草原火灾 -->
            <el-carousel-item style="width: 320px; height: 573px">
              <div class="huozai" @click="SlhzClick">
                <div class="lunbo">
                  <ul v-for="(item, index) in lints" :key="index">
                    <li class="l1">{{ item.a1 }}</li>
                    <li class="l2">
                      {{ item.a2 }}<a href="#">{{ item.a5 }}</a>
                    </li>
                    <li class="l4">
                      {{ item.a3 }} <a href="#">{{ item.a4 }}</a>
                    </li>
                  </ul>
                </div>
                <div class="yuan">
                  <span>●&nbsp;全区森林草原火灾灾情种类统计</span>
                  <div class="kuang">
                    <div class="xiang">
                      <PubliccircularProgressbar
                        chartId="diEcharts"
                        :title="dititle"
                        subtitle="地表火"
                        titleColor="#2FB4FF"
                        seriesColor1="#6648FF"
                        seriesColor2="#00AEF3"
                        :seriesData="chaoData"
                        :Radius="Radius"
                      />
                    </div>
                    <div class="nongye">
                      <PubliccircularProgressbar
                        chartId="shuEcharts"
                        :title="shutitle"
                        subtitle="树冠火"
                        titleColor="#65FF74"
                        seriesColor1="#77FF47"
                        seriesColor2="#00AEF3"
                        :seriesData="jingData"
                        :Radius="NongRadius"
                      />
                    </div>
                    <div class="shuiwen">
                      <PubliccircularProgressbar
                        chartId="huoEcharts"
                        :title="huotitle"
                        subtitle="地下火"
                        titleColor="#FF2020"
                        seriesColor1="#FF2214"
                        seriesColor2="#FF2214"
                        :seriesData="jiData"
                        :Radius="Radius"
                      />
                    </div>
                  </div>
                </div>
                <div class="tongxia">
                  <span>●&nbsp;2020各区灾情统计（单位：件/月）</span>
                  <PublicfourHistogram
                    seriesType="bar"
                    seriesType1="bar"
                    seriesType2="bar"
                    seriesType3="bar"
                    chartId="HuoEcharts"
                    title
                    seriesName="蓝色"
                    seriesName1="黄色"
                    seriesName2="橙色"
                    seriesName3="红色"
                    :xData="xData"
                    :seriesData="seriesData"
                    :seriesData1="seriesData1"
                    :seriesData2="seriesData2"
                    :seriesData3="seriesData3"
                  />
                </div>
              </div>
            </el-carousel-item>
            <!-- 灾害链 -->
            <el-carousel-item style="width: 320px; height: 573px">
              <div class="zaihai" @click="ZhlClick">
                <img src="../assets/img/zaihai.png" alt="" class="zaig" />
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="main-xia">
        <div class="x-left">
          <img src="../assets/svg/a1.svg" alt="" class="a1" />
          <h3 class="hang">承载体数据</h3>
          <div class="css5-table">
            <ul>
              <li>
                <input type="radio" checked name="tabs" id="tab1" />
                <label for="tab1">人口占比</label>
                <div id="table-content-1 " class="content hide">
                  <div
                    id="main"
                    :style="{
                      width: '280px',
                      height: '200px',
                    }"
                  ></div>
                </div>
              </li>
              <li>
                <input type="radio" name="tabs" id="tab2" />
                <label for="tab2">房屋占比</label>
                <div id="table-content-2" class="content hide">
                  <div
                    id="delo"
                    :style="{ width: '280px', height: '200px' }"
                  ></div>
                </div>
              </li>
              <li>
                <input type="radio" name="tabs" id="tab3" />
                <label for="tab3">基础设施占比</label>
                <div id="table-content-3" class="content hide">
                  <div
                    id="maib"
                    :style="{ width: '280px', height: '200px' }"
                  ></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="zhong">
          <img src="../assets/svg/a2.svg" alt="" class="a2" />
          <h3 class="hung">灾情播报</h3>
          <marquee
            class="marq"
            behavior="scroll"
            align="absbottom"
            cellspacing="0"
            direction="up"
            cellpadding="0"
            scrollamount="2"
            onmouseout="this.start()"
            onmouseover="this.stop()"
            style="height: 40px"
          >
            <ul class="roll">
              <li class="bb1">
                2020-11-27 16:21:38
                固原市原州区（北纬35.99度，东经106.01度）发生2.1级地震，震源深度16.8千米。
              </li>
              <br />
              <li class="bb1">
                2020-11-27 16:21:38
                银川市原州区（北纬35.99度，东经106.01度）发生2.1级地震，震源深度16.8千米。
              </li>
              <br />
              <li class="bb1">
                2020-11-27 16:21:38
                中卫市原州区（北纬35.99度，东经106.01度）发生2.1级地震，震源深度16.8千米。
              </li>
            </ul>
          </marquee>
        </div>
        <div class="zhong-xia">
          <img
            src="../assets/svg/yizhang.svg"
            alt=""
            class="io"
            @click="ApictureClick"
          />
          <img
            src="../assets/svg/zonghe.svg"
            alt=""
            class="im"
            @click="ComprehensivemonitoringClick"
          />
          <img
            src="../assets/svg/zhineng.svg"
            alt=""
            class="im"
            @click="SmartassessmentClick"
          />
          <img
            src="../assets/svg/jingzhun.svg"
            alt=""
            class="im"
            @click="PrecisewarningClick"
          />
          <img
            src="../assets/svg/dongtai.svg"
            alt=""
            class="im"
            @click="DynamicjudgmentClick"
          />
          <img
            src="../assets/svg/zong.svg"
            alt=""
            class="im"
            @click="Integratedmanagementlick"
          />
          <img
            src="../assets/svg/xitong.svg"
            alt=""
            class="im"
            @click="SystemClick"
          />
        </div>
        <div class="x-right">
          <img src="../assets/svg/a1.svg" alt="" class="a3" />
          <h3 class="heng">防灾减灾数据</h3>
          <div class="sandian" ref="conversion1"></div>
          <div class="shuzi">
            <dl class="shu1">
              <dt>2017</dt>
              <dd>0&nbsp;8</dd>
            </dl>
            <dl class="shu2">
              <dt>2018</dt>
              <dd>0&nbsp;2</dd>
            </dl>
            <dl class="shu3">
              <dt>2019</dt>
              <dd>1&nbsp;8</dd>
            </dl>
            <dl class="shu4">
              <dt>2020</dt>
              <dd>2&nbsp;3</dd>
            </dl>
          </div>
        </div>
        <div class="fenx">
          <h3>风险指数</h3>
          <div
            class="yinc"
            v-for="(item, index) in list"
            :key="index"
            :style="{ backgroundImage: 'url(' + item.img + ')' }"
          >
            <h2>{{ item.h1 }}</h2>
            <p>{{ item.sp }}</p>
          </div>
        </div>
      </div>
      <div class="shi">
        <div class="shiu">
          <dv-decoration-3 style="width: 250px; height: 30px" />
        </div>
      </div>
      <div class="shio">
        <div class="shiu">
          <dv-decoration-3 style="width: 250px; height: 30px" />
        </div>
      </div>
      <div class="dv-left">
        <dv-decoration-4
          style="width: 8px; height: 650px"
          :color="['#35CFFF']"
          :dur="14"
        />
      </div>
      <div class="dv-right">
        <dv-decoration-4
          style="width: 8px; height: 650px"
          :color="['#35CFFF']"
          :dur="14"
        />
      </div>
    </div>
  </div>
</template>

<script>
import ningxia from "../../static/echarts-map-data-master/china-province/geojson/ningxia.json";
import guyuan from "../../static/echarts-map-data-master/china-province/geojson/guyuan.json";
import shizuishan from "../../static/echarts-map-data-master/china-province/geojson/shizuishan.json";
import yinchuan from "../../static/echarts-map-data-master/china-province/geojson/yinchuan.json";
import zhongwei from "../../static/echarts-map-data-master/china-province/geojson/zhongwei.json";
import wuzhong from "../../static/echarts-map-data-master/china-province/geojson/wuzhong.json";
import PublicfourHistogram from "./PubliccomponentLibrary/PublicfourHistogram";
import PublicthreeHistogram from "./PubliccomponentLibrary/PublicthreeHistogram";
import PublicfourlineChart from "./PubliccomponentLibrary/PublicfourlineChart";
import PublictheelineChart from "./PubliccomponentLibrary/PublictheelineChart";
import PubliccircularProgressbar from "./PubliccomponentLibrary/PubliccircularProgressbar";
import echarts from "echarts";
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  components: {
    PublicfourHistogram,
    PublicthreeHistogram,
    PublicfourlineChart,
    PublictheelineChart,
    PubliccircularProgressbar,
  },
  data() {
    return {
      list: [
        {
          img: require("../assets/svg/qiu1.svg"),
          h1: 9,
          sp: "银川市",
        },
        {
          img: require("../assets/svg/qiu2.svg"),
          h1: 3,
          sp: "吴忠市",
        },
        {
          img: require("../assets/svg/qiu3.svg"),
          h1: 11,
          sp: "固原市",
        },
        {
          img: require("../assets/svg/qiu4.svg"),
          h1: 2,
          sp: "中卫市",
        },
        {
          img: require("../assets/svg/qiu5.svg"),
          h1: 11,
          sp: "石嘴山市",
        },
        {
          img: require("../assets/svg/qiu6.svg"),
          h1: 36,
          sp: "全自治区",
        },
      ],
      xData: ["银川市", "石嘴山市", "吴忠市", "固原市", "中卫市"],
      seriesData: [24, 18, 13, 10, 8],
      seriesData1: [15, 5, 3, 22, 10],
      seriesData2: [6, 8, 3, 7, 4],
      seriesData3: [2, 2, 2, 2, 2],
      xthreeData: ["银川市", "石嘴山市", "吴忠市", "固原市", "中卫市"],
      seriesthreeData: [15, 9, 14, 17, 7],
      seriesthreeData1: [18, 22, 8, 20, 23],
      seriesthreeData2: [22, 18, 25, 14, 20],
      xfourlineData: ["8月", "9月", "10月", "11月", "12月"],
      serieslinefourData: [20, 13, 19, 18, 19],
      serieslinefourData1: [10, 8, 6, 12, 17],
      serieslinefourData2: [3, 4, 3, 14, 8],
      serieslinefourData3: [0, 1, 0, 1, 1],
      xthreelineData: ["8月", "9月", "10月", "11月", "12月"],
      serieslinethreeData: [15, 6, 12, 6, 14],
      serieslinethreeData1: [10, 17, 5, 8, 11],
      serieslinethreeData2: [20, 10, 16, 22, 5],
      xquanData: ["受灾人口", "受灾面积", "损坏房屋", "经济损失", "转移安置"],
      seriesthData: [30000, 20000, 30000, 40000, 20000],
      seriesthData1: [40000, 50000, 20000, 60000, 50000],
      seriesthData2: [50000, 40000, 60000, 20000, 40000],
      lists: [
        {
          l1: "指标名称",
          l2: 32866,
          l3: "同比增长",
          l4: "∧12%",
        },
        {
          l1: "指标名称",
          l2: 43590,
          l3: "同比增长",
          l4: "∧6%",
        },
      ],
      lista: [
        {
          l1: "受灾人口",
          l2: "1.12",
          l3: "同比下降",
          l4: "∨5%",
          l5: "万人",
        },
        {
          l1: "经济损失",
          l2: "20.23",
          l3: "同比下降",
          l4: "∨12%",
          l5: "亿元",
        },
      ],
      listb: [
        {
          l1: "受灾人口",
          l2: "0.23",
          l3: "同比增长",
          l4: "∧1%",
          l5: "万人",
        },
        {
          l1: "经济损失",
          l2: "4350",
          l3: "同比增长",
          l4: "∧6%",
          l5: "亿元",
        },
      ],
      listc: [
        {
          l1: "受灾人口",
          l2: "45",
          l3: "同比下降",
          l4: "∨5%",
          l5: "万人",
        },
        {
          l1: "经济损失",
          l2: "9824",
          l3: "同比下降",
          l4: "∨12 %",
          l5: "亿元",
        },
      ],
      lints: [
        {
          a1: "受灾人口",
          a2: "0.45",
          a3: "同比下降",
          a4: "∨5%",
          a5: "万人",
        },
        {
          a1: "经济损失",
          a2: "158.3",
          a3: "同比下降",
          a4: "∨12%",
          a5: "亿元",
        },
      ],
      lises: [
        {
          imgages: "http://101.133.173.241:8085/images/water-blue.svg",
          shu: "0",
        },
        {
          imgages: "http://101.133.173.241:8085/images/DHwind-blue.svg",
          shu: "4",
        },
        {
          imgages: "http://101.133.173.241:8085/images/cold-blue.svg",
          shu: "6",
        },
        {
          imgages: "http://101.133.173.241:8085/images/fog-blue.svg",
          shu: "0",
        },
        {
          imgages: "http://101.133.173.241:8085/images/frost-blue.svg",
          shu: "1",
        },
        {
          imgages: "http://101.133.173.241:8085/images/scb-blue.svg",
          shu: "1",
        },
        {
          imgages: "http://101.133.173.241:8085/images/fire-blue.svg",
          shu: "4",
        },
        {
          imgages: "http://101.133.173.241:8085/images/ice-blue.svg",
          shu: "0",
        },
        {
          imgages: "http://101.133.173.241:8085/images/dz-blue.svg",
          shu: "0",
        },
        {
          imgages: "http://101.133.173.241:8085/images/rain-blue.svg",
          shu: "8",
        },
        {
          imgages: "http://101.133.173.241:8085/images/snow-blue.svg",
          shu: "1",
        },
        {
          imgages: "http://101.133.173.241:8085/images/haze-blue.svg",
          shu: "2",
        },
        {
          imgages: "http://101.133.173.241:8085/images/high-blue.svg",
          shu: "4",
        },
      ],
      lisa: [
        {
          img: require("../assets/svg/Group 1616.svg"),
          po: "1个",
          pp: "地质灾害",
        },
        {
          img: require("../assets/svg/Group 1617.svg"),
          po: "4个",
          pp: "地震灾害",
        },
        {
          img: require("../assets/svg/Group 1618.svg"),
          po: "1个",
          pp: "干旱灾害",
        },
        {
          img: require("../assets/svg/Group 1619.svg"),
          po: "2个",
          pp: "洪涝灾害",
        },
        {
          img: require("../assets/svg/Group 1620.svg"),
          po: "1个",
          pp: "林草灾害",
        },
        {
          img: require("../assets/svg/Group 1621.svg"),
          po: "0个",
          pp: "气象灾害",
        },
      ],
      seriespieData: (53 / 74).toFixed(2) * 100,
      nongyeData: (21 / 74).toFixed(2) * 100,
      shuiData: (2 / 74).toFixed(2) * 100,
      chaoData: (53 / 74).toFixed(2) * 100,
      jingData: (23 / 74).toFixed(2) * 100,
      jiData: (2 / 74).toFixed(2) * 100,
      pietitle: 53 + "起",
      Radius: ["40%", "45%"],
      nongtitle: 21 + "起",
      NongRadius: ["40%", "45%"],
      shuititle: 0 + "起",
      chaotitle: 2 + "座",
      jingtitle: 1 + "个",
      jititle: 16 + "个",
      dititle: 3 + "起",
      shutitle: 1 + "起",
      huotitle: 0 + "起",
      flag: false,
    };
  },
  created() {},
  mounted() {
    const _this = this;
    _this.canvasChinaMap(ningxia);
    this.initData3();
    this.initData2();
    this.initData1();
    this.getCharts1();
  },
  methods: {
    // 气象模块跳转事件
    QyiClick() {
      window.location.href = "http://101.133.173.241:8085/dist1/dist/#/other";
    },
    // 地质模块跳转事件
    DziClick() {
      window.location.href = "http://101.133.173.241:8085/dist1/dist/#/dizhi";
    },
    // 地震模块跳转事件
    DzziClick() {
      window.location.href = "http://101.133.173.241:8085/dist1/dist/#/dizheng";
    },
    // 全灾害模块跳转事件
    QzhiClick() {
      window.location.href = "http://101.133.173.241:8085/dist1/dist/#/YingJi";
    },
    // 干旱模块跳转事件
    GhiClick() {
      window.location.href = "http://101.133.173.241:8085/dist1/dist/#/ganhan";
    },
    // 洪涝模块跳转事件
    HLiClick() {
      window.location.href = "http://101.133.173.241:8085/dist1/dist/#/lao";
    },
    // 森林火灾模块跳转事件
    SlhzClick() {
      window.location.href = "http://101.133.173.241:8085/dist1/dist/#/huo";
    },
    // 灾害链模块跳转事件
    ZhlClick() {
      this.$router.push({
        path: "/DisasterChain",
      });
    },
    // 一张图模块跳转

    ApictureClick() {
      window.location.href = "http://101.133.173.241:8085/dist1/dist/#/YingJi";
    },
    // 综合监测模块跳转
    ComprehensivemonitoringClick() {
      window.location.href = "http://101.133.173.241:8085/dist1/dist/#/jiance";
    },
    // 智能评估模块跳转
    SmartassessmentClick() {
      window.location.href = "http://101.133.173.241:8085/dist/#/system/user";
    },
    // 精准预警模块跳转
    PrecisewarningClick() {
      window.location.href =
        "http://101.133.173.241:8085/dist/#/monitor/online";
    },
    // 动态研判模块跳转
    DynamicjudgmentClick() {
      window.location.href = "http://101.133.173.241:8085/dist1/dist/#/bb";
    },
    // 综合管理模块跳转
    Integratedmanagementlick() {
      window.location.href = "http://101.133.173.241:8085/dist/#/index";
    },
    // 系统管理模块跳转
    SystemClick() {
      window.location.href =
        "http://101.133.173.241:8085/dist/#/system/log/operlog";
    },
    initData3() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      var colorList = [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(255,236,69,0.33)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(255,236,69,1)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(1,120,246,0.2)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(1,120,246,1)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(5,207,255,0.5)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(5,207,255,1)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(251,136,50,0.2)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(251,136,50,1)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 1,
          y: 1,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(253,138,106,0.2)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#FDB36ac2", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(79,82,217,1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#FECE4391", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
      ];
      var colorLine = [
        "#33C0CD",
        "#73ACFF",
        "#9E87FF",
        "#FE6969",
        "#FDB36A",
        "#FECE43",
      ];
      function getRich() {
        let result = {};
        colorLine.forEach((v, i) => {
          result[`hr${i}`] = {
            backgroundColor: colorLine[i],
            borderRadius: 3,
            width: 3,
            height: 3,
            padding: [3, 3, 0, -12],
          };
          result[`a${i}`] = {
            padding: [8, -60, -20, -20],
            color: colorLine[i],
            fontSize: 12,
          };
        });
        return result;
      }
      let data = [
        {
          name: "银川市",
          value: 22,
        },
        {
          name: "吴忠市",
          value: 22,
        },
        {
          name: "固原市",
          value: 18,
        },
        {
          name: "石嘴山",
          value: 11,
        },
        {
          name: "中卫市",
          value: 13,
        },
      ].sort((a, b) => {
        return b.value - a.value;
      });
      data.forEach((v, i) => {
        v.labelLine = {
          lineStyle: {
            width: 1,
            color: colorLine[i],
          },
        };
      });
      myChart.setOption({
        // legend: {
        //   top: "90px",
        //   left: "80px",

        //   orient: "vertical",
        //   data: ["银川市", "吴忠市", "固原市", "中卫市"],
        // },
        series: [
          {
            type: "pie",
            radius: "50%",
            center: ["50%", "42%"],
            clockwise: true,
            avoidLabelOverlap: true,
            label: {
              show: true,
              position: "outside",
              formatter: function (params) {
                const name = params.name;
                const percent = params.percent + "%";
                const index = params.dataIndex;
                return [
                  `{a${index}|${name}：${percent}}`,
                  `{hr${index}|}`,
                ].join("\n");
              },
              rich: getRich(),
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            data,
            roseType: "radius",
          },
        ],
      });
    },
    initData1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("delo"));
      // 绘制图表
      var colorList = [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(1,120,246,0.23)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(1,120,246,1)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(79,82,217,0.1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(79,82,217,1)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(255,236,69,0.8)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(255,236,69,1)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(5,207,255,0.5)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(5,207,255,1)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 1,
          y: 1,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(253,138,50,0.33)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(251,136,50,1)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(254,206,67,0.12)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#FECE4391", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
      ];
      var colorLine = [
        "#33C0CD",
        "#73ACFF",
        "#9E87FF",
        "#FE6969",
        "#FDB36A",
        "#FECE43",
      ];
      function getRich() {
        let result = {};
        colorLine.forEach((v, i) => {
          result[`hr${i}`] = {
            backgroundColor: colorLine[i],
            borderRadius: 3,
            width: 3,
            height: 3,
            padding: [3, 3, 0, -12],
          };
          result[`a${i}`] = {
            padding: [8, -60, -20, -20],
            color: colorLine[i],
            fontSize: 12,
          };
        });
        return result;
      }
      let data = [
        {
          name: "银川市",
          value: 19,
        },
        {
          name: "吴忠市",
          value: 22,
        },
        {
          name: "固原市",
          value: 26,
        },
        {
          name: "石嘴山",
          value: 16,
        },
        {
          name: "中卫市",
          value: 16,
        },
      ].sort((a, b) => {
        return b.value - a.value;
      });
      data.forEach((v, i) => {
        v.labelLine = {
          lineStyle: {
            width: 1,
            color: colorLine[i],
          },
        };
      });
      myChart.setOption({
        // legend: {
        //   top: "90px",
        //   left: "80px",

        //   orient: "vertical",
        //   data: ["银川市", "吴忠市", "固原市", "中卫市"],
        // },
        series: [
          {
            type: "pie",
            radius: "50%",
            center: ["50%", "42%"],
            clockwise: true,
            avoidLabelOverlap: true,
            label: {
              show: true,
              position: "outside",
              formatter: function (params) {
                const name = params.name;
                const percent = params.percent + "%";
                const index = params.dataIndex;
                return [
                  `{a${index}|${name}：${percent}}`,
                  `{hr${index}|}`,
                ].join("\n");
              },
              rich: getRich(),
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            data,
            roseType: "radius",
          },
        ],
      });
    },
    initData2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("maib"));
      // 绘制图表
      var colorList = [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(255,236,69,0.4)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(255,236,69,1)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(1,120,246,0.3)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(1,120,246,1)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(158,135,255,0.1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(158,135,255,0.57)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(252,75,75,0.22)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(252,75,75,0.57)", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 1,
          y: 1,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(253,138,106,0.2)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#FDB36ac2", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(254,206,67,0.18)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#FECE4391", // 100% 处的颜色
            },
          ],
          globalCoord: false, // 缺省为 false
        },
      ];
      var colorLine = [
        "#33C0CD",
        "#73ACFF",
        "#9E87FF",
        "#FE6969",
        "#FDB36A",
        "#FECE43",
      ];
      function getRich() {
        let result = {};
        colorLine.forEach((v, i) => {
          result[`hr${i}`] = {
            backgroundColor: colorLine[i],
            borderRadius: 3,
            width: 3,
            height: 3,
            padding: [3, 3, 0, -12],
          };
          result[`a${i}`] = {
            padding: [8, -60, -20, -20],
            color: colorLine[i],
            fontSize: 12,
          };
        });
        return result;
      }
      let data = [
        {
          name: "银川市",
          value: 25,
        },
        {
          name: "吴忠市",
          value: 18,
        },
        {
          name: "石嘴山",
          value: 18,
        },
        {
          name: "固原市",
          value: 15,
        },
        {
          name: "中卫市",
          value: 13,
        },
      ].sort((a, b) => {
        return b.value - a.value;
      });
      data.forEach((v, i) => {
        v.labelLine = {
          lineStyle: {
            width: 1,
            color: colorLine[i],
          },
        };
      });
      myChart.setOption({
        // legend: {
        //   top: "90px",
        //   left: "80px",

        //   orient: "vertical",
        //   data: ["银川市", "吴忠市", "固原市", "中卫市"],
        // },
        series: [
          {
            type: "pie",
            radius: "50%",
            center: ["50%", "41%"],
            clockwise: true,
            avoidLabelOverlap: true,
            label: {
              show: true,
              position: "outside",
              formatter: function (params) {
                const name = params.name;
                const percent = params.percent + "%";
                const index = params.dataIndex;
                return [
                  `{a${index}|${name}：${percent}}`,
                  `{hr${index}|}`,
                ].join("\n");
              },
              rich: getRich(),
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            data,
            roseType: "radius",
          },
        ],
      });
    },
    canvasChinaMap: function (mapDta) {
      let mapname = mapDta;
      var mapJson = [
        {
          name: "石嘴山市",
          json: shizuishan,
        },
        {
          name: "固原市",
          json: guyuan,
        },
        {
          name: "银川市",
          json: yinchuan,
        },
        {
          name: "吴忠市",
          json: wuzhong,
        },
        {
          name: "中卫市",
          json: zhongwei,
        },
      ];
      var mapDate = [
        {
          name: "石嘴山",
        },
        {
          name: "中卫市",
        },
        {
          name: "吴忠市",
        },
        {
          name: "银川市",
        },
        {
          name: "固原市",
        },
      ];
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("china_map"));
      myChart.showLoading();
      //注意这里的zigong与下面的series.map一致
      this.$echarts.registerMap("ningxia", mapDta);
      myChart.hideLoading();
      // 绘制图表
      let option = {
        //参考配置文档：https://echarts.baidu.com/option.html#title
        title: {
          text: " ",
          left: "center",
        },
        //参考配置文档：https://echarts.baidu.com/option.html#tooltip
        tooltip: {
          show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。 [ default: true ]
          trigger: "item", //触发类型。 [ default: 'item' ]
          showDelay: 0,
          transitionDuration: 0.2,
          formatter: function (params) {
            return params.name;
          },
        },
        //参考配置文档：https://echarts.baidu.com/option.html#series-map.type
        series: [
          {
            name: "", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。见上：可以在tooltip中获取到
            type: "map", //指定是地图类型
            map: "ningxia", //和上面registerMap中的一直
            selectedMode: "single", //选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。
            itemStyle: {
              areaColor: "#0044C8",
              borderColor: "#36FFF3",
              borderWidth: 2,
            },
            emphasis: {
              //强调的样式，也就是鼠标移入后的样式==高亮状态下的多边形和标签样式。
              itemStyle: {
                areaColor: "#36FFF3",
              },
            },
            label: {
              normal: {
                show: true, //是否显示标签，这里显示的就是省份的名字。默认就是false
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                show: false, //在鼠标移入时，是否显示，如果不写，默认是显示的
              },
            },
            // 鼠标移入对应省份区域显示对应的值：可以异步获取
            data: mapDate,
          },
        ],
      };
      myChart.setOption(option);
      let that = this;
      myChart.on("click", function (e) {
        var chooseName = mapJson.filter((item) => {
          return item.name == e.name;
        });
        mapname = chooseName[0].json;
        that.flag = true;
        that.canvasChinaMap(mapname);
      });
    },
    getCharts1() {
      var plantCap = [
        {
          value: "56.36",
        },
        {
          value: "59.53",
        },
        {
          value: "71.93",
        },
        {
          value: "37.05",
        },
        {
          value: "35.71",
        },
        {
          value: "25.33",
        },
        {
          value: "6.58",
        },
        {
          value: "4.72",
        },
        {
          value: "2.78",
        },
      ];
      var datalist = [
        {
          offset: [5, 40],
          symbolSize: 40,
          opacity: 0.95,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#27B1FE",
            },
            {
              offset: 1,
              color: "#1DC560",
            },
          ]),
        },
        {
          // offset: [0, 70],
          symbolSize: 40,
          opacity: 0.95,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#FF3CEB",
            },
            {
              offset: 1,
              color: "#6A36FF",
            },
          ]),
        },
        {
          offset: [10, 80],
          symbolSize: 30,
          opacity: 0.95,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#FFB800",
            },
            {
              offset: 1,
              color: "#FF753D",
            },
          ]),
        },
        {
          offset: [30, 60],
          symbolSize: 70,
          opacity: 0.95,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#FF3CEB",
            },
            {
              offset: 1,
              color: "#6A36FF",
            },
          ]),
        },
        {
          offset: [40, 25],
          symbolSize: 50,
          opacity: 10,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#FFB800",
            },
            {
              offset: 1,
              color: "#FF753D",
            },
          ]),
        },
        {
          offset: [55, 80],
          symbolSize: 30,
          opacity: 0.68,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#27D7FE",
            },
            {
              offset: 1,
              color: "#1D4CC5",
            },
          ]),
        },
        {
          // offset: [20, 15],
          symbolSize: 20,
          opacity: 0.7,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#FF3CEB",
            },
            {
              offset: 1,
              color: "#6A36FF",
            },
          ]),
        },

        {
          // offset: [65, 25],
          symbolSize: 20,
          opacity: 10,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#29c0fb",
            },
            {
              offset: 1,
              color: "#2dc5b9",
            },
          ]),
        },
        {
          // offset: [55, 10],
          symbolSize: 20,
          opacity: 0.68,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#0FE04A",
            },
            {
              offset: 1,
              color: "#74FF8A",
            },
          ]),
        },
      ];
      var datas = [];
      for (var i = 0; i < plantCap.length; i++) {
        var item = plantCap[i];
        var itemToStyle = datalist[i];
        datas.push({
          name: item.name + "\n" + item.value,
          value: itemToStyle.offset,
          symbolSize: itemToStyle.symbolSize,
          label: {
            normal: {
              textStyle: {
                fontSize: 13,
                lineHeight: 17,
              },
            },
          },
          itemStyle: {
            normal: {
              color: itemToStyle.color,
              opacity: itemToStyle.opacity,
            },
          },
        });
      }

      let myChart = this.$echarts.init(this.$refs.conversion1);
      myChart.setOption({
        //  backgroundColor: '#20203e',
        grid: {
          show: false,
          top: 10,
          bottom: 10,
        },
        xAxis: [
          {
            gridIndex: 0,
            type: "value",
            show: false,
            min: 0,
            max: 100,
            nameLocation: "middle",
            nameGap: 5,
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: "middle",
            nameGap: 30,
          },
        ],
        series: [
          {
            type: "scatter",
            symbol: "circle",
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                color: "#fff",
                textStyle: {
                  fontSize: "20",
                },
              },
            },
            itemStyle: {
              normal: {
                color: "#00acea",
              },
            },
            data: datas,
          },
        ],
      });
    },
    back() {
      this.flag = false;
      this.canvasChinaMap(ningxia);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
@font-face {
  font-family: YouSheBiaoTiHei;
  src: url("../assets/font/YouSheBiaoTiHei-2.ttf");
}
@font-face {
  font-family: Quantico;
  src: url("../assets/font/Quantico.ttf");
}
.all {
  width: 100%;
}
.main {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  background: url("../assets/img/background.png") no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}
.main-shang {
  width: 100%;
  height: 58%;
  margin-top: 5%;
  margin-left: 4%;
}
.zmd-1 {
  height: 95%;
  width: 33.5%;
  float: left;
}
.qixiang {
  width: 320px;
  height: 100%;
  background: url("../assets/svg/qixiang.svg");
  background-size: 100%;
}
.dizhi {
  width: 320px;
  height: 100%;
  background: url("../assets/svg/dizhi.svg");
  background-size: 100%;
}
.dizheng {
  width: 320px;
  height: 100%;
  background: url("../assets/svg/dizheng.svg");
  background-size: 100%;
}
.quanzai {
  width: 320px;
  height: 100%;
  background: url("../assets/svg/quanzai.svg");
  background-size: 100%;
}
.lunbo {
  position: absolute;
  top: 12%;
  left: 8%;
}
.lunbo ul {
  float: left;
  margin-left: 22px;
}
.tongji {
  width: 80%;
  height: 30%;
  padding-top: 50%;
  padding-left: 10%;
}
.tongji span {
  font-size: 15px;
  color: #40e7ea;
}
.tubiao {
  width: 85%;
  height: 35%;
  padding-top: 9%;
  padding-left: 10%;
}
.tubiao span {
  font-size: 15px;
  color: #40e7ea;
  float: left;
}
.tubiao p {
  width: 20px;
  height: 20px;
  background: red;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
  float: right;
  margin-top: 20px;
}
.quantu {
  width: 100%;
  height: 100%;
  margin-top: 10%;
}
.tubiao1 {
  width: 18%;
  height: 40px;
  margin-left: 2%;
  float: left;
  margin-top: 4%;
}
.zhexian {
  width: 80%;
  height: 30%;
  padding-top: 9%;
  padding-left: 10%;
}
.zhexian span {
  font-size: 15px;
  color: #40e7ea;
}
.zaiimg {
  width: 85%;
  height: 35%;
  padding-top: 9%;
  padding-left: 10%;
}
.zaiimg span {
  font-size: 15px;
  color: #40e7ea;
  margin-top: 4%;
}
.zaihan {
  width: 55px;
  height: 65px;
  margin-left: 9%;
  float: left;
  background: no-repeat;
  margin-top: 7%;
}
.quantue {
  width: 100%;
  height: 100%;
  margin-bottom: 2%;
}
.zaihan p {
  font-size: 10px;
  color: #fff;
  width: 60px;
  margin-top: 30%;
}
.zaihan h4 {
  color: #fff;
  font-weight: 400;
  text-align: center;
  padding-top: 16px;
}
.l1 {
  color: #fff;
  font-size: 16px;
}
.l2 {
  color: #129bff;
  font-size: 28px;
  margin-top: 4px;
}
.l3 {
  color: #fff;
  font-size: 9px;
  margin-top: 4px;
}
.l3 a {
  text-decoration: none;
  color: #f85960;
  font-size: 9px;
  padding-left: 10px;
}
.l4 {
  color: #fff;
  font-size: 9px;
  margin-top: 4px;
}
.l4 a {
  text-decoration: none;
  color: #7ef85f;
  font-size: 9px;
  padding-left: 10px;
}
.l2 a {
  color: #129bff;
  font-size: 12px;
  text-decoration: none;
}
.el-carousel__item {
  height: auto;
}
.el-carousel__item:nth-child(2n) {
  /* background: rgba(3, 25, 51, 0.8); */
  border-radius: 30px;
}

.el-carousel__item:nth-child(2n + 1) {
  /* background: rgba(3, 25, 51, 0.8); */
  border-radius: 30px;
}
/deep/ .el-carousel__mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.img-o {
  width: 100%;
}
.center {
  width: 25%;
  height: 90%;
  margin-left: 1%;
  margin-top: 2%;
  float: left;
}
.bo {
  width: 580px;
  height: 600px;
  position: relative;
}
.bo1 {
  width: 470px;
  height: 650px;
  position: absolute;
  left: -2%;
  top: -15%;
}
.zmd-2 {
  height: 95%;
  width: 33.5%;
  float: left;
  margin-right: 2%;
}

.ganhan {
  width: 320px;
  height: 100%;
  background: url("../assets/svg/ganhan.svg");
  background-size: 100%;
}
.yuan {
  width: 80%;
  height: 30%;
  padding-top: 56%;
  padding-left: 10%;
}
.yuan span {
  font-size: 15px;
  color: #40e7ea;
}
.kuang {
  width: 100%;
  height: 100%;
  position: relative;
}
.xiang {
  width: 90%;
  height: 100%;
  position: absolute;
  left: -30%;
  top: -8%;
}
.nongye {
  width: 90%;
  height: 100%;
  position: absolute;
  left: 5%;
  top: -8%;
}
.shuiwen {
  width: 90%;
  height: 100%;
  position: absolute;
  left: 40%;
  top: -8%;
}
.tongxia {
  width: 80%;
  height: 30%;
  padding-left: 10%;
}
.tongxia span {
  font-size: 15px;
  color: #40e7ea;
}
.honglao {
  width: 320px;
  height: 100%;
  background: url("../assets/svg/lao.svg");
  background-size: 100%;
}
.huozai {
  width: 320px;
  height: 100%;
  background: url("../assets/svg/huozai.svg");
  background-size: 100%;
}
.zaihai {
  width: 320px;
  height: 100%;
  background: url("../assets/svg/zaihai.svg");
  background-size: 100%;
  position: relative;
}
.zaig {
  position: absolute;
  left: 0;
  top: 3%;
  width: 100%;
}
#back {
  position: relative;
  top: -30px;
  left: -83px;
  color: #36fff3;
  cursor: pointer;
}
.main-xia {
  width: 100%;
  height: 28%;
  margin-left: 4%;
  position: relative;
  margin-top: 2%;
}
.x-left {
  width: 30%;
  height: 100%;
  position: relative;
  /* float: left; */
}
.a1 {
  width: 70%;
  position: absolute;
  top: 5%;
  left: 0%;
}
.hang {
  font-family: YouSheBiaoTiHei;
  color: #fff;
  font-weight: 400;
  font-size: 1.5em;
  letter-spacing: 5px;
  position: absolute;
  top: 1%;
  left: 18%;
}
.css5-table input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.css5-table {
  width: 80%;
  height: 200px;
  color: #fff;
  position: relative;
  padding-top: 8%;
}
.css5-table input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.hide {
  display: none;
}
.css5-table ul {
  margin-top: 4%;
}
.css5-table ul li {
  width: 22%;
  margin-left: 3%;
  margin-top: 2%;
  border: 1px solid #4198ff;
}
.css5-table ul li label {
  display: block;
  color: #fff;
  font-size: 0.8vw;
  line-height: 1.4vw;
  cursor: pointer;
  position: relative;
  top: 3px;
  text-align: center;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.css5-table ul li .content {
  text-align: left;
  overflow: hidden;
  width: 100%;
  line-height: 140%;
  padding-top: 10px;
  padding: 15px;
  color: #fff;
  position: absolute;
  top: 5px;
  left: -12px;
  box-sizing: border-box;
}
[id^="tab"]:checked + label {
  color: #36fff3;
}
[id^="tab"]:checked ~ [id^="table-content"] {
  display: block;
  margin-top: 8%;
  margin-left: 25%;
}
.zhong {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 5%;
  left: 28%;
  margin-top: 2%;
}
.marq {
  width: 70%;
  position: absolute;
  top: 18%;
  left: 0;
}
.roll {
  color: #36e6d0;
  font-size: 1.2em;
  margin-left: 50px;
  list-style: none;
}
.bb1 {
  height: 40px;
}
.hung {
  font-family: YouSheBiaoTiHei;
  color: #fff;
  font-weight: 400;
  font-size: 1.5em;
  letter-spacing: 5px;
  position: absolute;
  top: -8%;
  left: 8%;
}
.zhong-xia {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 48%;
  left: 25%;
  margin-top: 2%;
}
.fenx {
  width: 50%;
  height: 40%;
  position: absolute;
  top: -33%;
  left: 30%;
  margin-top: 1%;
}
.fenx h2 {
  color: #25d8ff;
  font-weight: 400;
  text-align: center;
  padding-top: 16px;
}
.fenx h3 {
  writing-mode: tb-rl;
  font-family: YouSheBiaoTiHei;
  color: #36e6d0;
  font-weight: 400;
  float: left;
  font-size: 1.1em;
}
.yinc {
  width: 68px;
  height: 68px;
  margin-top: 1%;
  margin-left: 3%;
  float: left;
}
.fenx p {
  font-size: 14px;
  color: #fff;
  padding-left: 10px;
  margin-top: 30%;
}
.im {
  margin-left: 5%;
  width: 7%;
}
.io {
  width: 7%;
  margin-left: 3%;
}
.x-right {
  width: 30%;
  height: 100%;
  position: absolute;
  top: 2%;
  left: 69%;
  margin-top: 5px;
  margin-left: 3%;
}
.a3 {
  width: 70%;
}
.heng {
  font-family: YouSheBiaoTiHei;
  color: #fff;
  font-weight: 400;
  font-size: 1.5em;
  letter-spacing: 5px;
  position: absolute;
  top: -4%;
  left: 18%;
}
.shi {
  position: absolute;
  bottom: 1%;
  left: 2%;
}
.shio {
  position: absolute;
  bottom: 1%;
  right: 2%;
}
.dv-left {
  position: absolute;
  top: 20%;
  left: 2%;
}
.dv-right {
  position: absolute;
  top: 20%;
  right: 1%;
}
.sandian {
  height: 200px;
  width: 300px;
  position: absolute;
  top: 2%;
  left: 34%;
}
.shuzi {
  width: 300px;
}
.shu1 {
  width: 50px;
  height: 70px;
  margin-top: 20px;
  position: absolute;
  top: 5%;
  left: 5%;
}
.shu1 dt {
  color: #fff;
  text-align: center;
  margin-bottom: 4px;
}
.shu1 dd {
  font-family: Quantico;
  font-size: 26px;
  color: #36fff3;
  border: 1px dashed #36fff3;
  text-align: center;
  border-radius: 4.7px;
}
.shu2 {
  width: 50px;
  height: 70px;
  margin-top: 20px;
  position: absolute;
  top: 5%;
  left: 20%;
}
.shu2 dt {
  color: #fff;
  text-align: center;
  margin-bottom: 4px;
}
.shu2 dd {
  font-family: Quantico;
  font-size: 26px;
  color: #36fff3;
  border: 1px dashed #36fff3;
  text-align: center;
  border-radius: 4.7px;
}
.shu3 {
  width: 50px;
  height: 70px;
  margin-top: 20px;
  position: absolute;
  top: 35%;
  left: 5%;
}
.shu3 dt {
  color: #fff;
  text-align: center;
  margin-bottom: 4px;
}
.shu3 dd {
  font-family: Quantico;
  font-size: 26px;
  color: #36fff3;
  border: 1px dashed #36fff3;
  text-align: center;
  border-radius: 4.7px;
}
.shu4 {
  width: 50px;
  height: 70px;
  margin-top: 20px;
  position: absolute;
  top: 35%;
  left: 20%;
}
.shu4 dt {
  color: #fff;
  text-align: center;
  margin-bottom: 4px;
}
.shu4 dd {
  font-family: Quantico;
  font-size: 26px;
  color: #36fff3;
  border: 1px dashed #36fff3;
  text-align: center;
  border-radius: 4.7px;
}
.shiu {
  width: 100px;
  overflow: hidden;
}
</style>
